<template>
  <div class="payment-success-container">
    <el-result
      icon="success"
      title="支付成功"
      sub-title="您的订单已支付成功，感谢您的购买！"
    >
      <template #extra>
        <div class="order-info">
          <p>订单号: {{ outTradeNo }}</p>
          <p>支付金额: ¥{{ totalAmount }}</p>
          <p>支付时间: {{ timestamp }}</p>
        </div>
        <el-button 
          type="primary" 
          size="large"
          @click="goToOrders"
          style="margin-top: 20px"
        >查看订单</el-button>
      </template>
    </el-result>
  </div>
</template>

<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router'
import { onMounted, ref } from 'vue'

const route = useRoute()
const router = useRouter()

const outTradeNo = ref('')
const totalAmount = ref('')
const timestamp = ref('')

onMounted(() => {
  outTradeNo.value = route.query.out_trade_no as string
  totalAmount.value = route.query.total_amount as string
  timestamp.value = route.query.timestamp as string
})

const goToOrders = () => {
  router.push('/orders')
}
</script>

<style scoped>
.payment-success-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80vh;
}

.order-info {
  text-align: left;
  margin: 20px 0;
  line-height: 2;
}
</style>